import pages from '../pages/index';
import '../common';

const dataFetched = $.post('group/getGroupList.do');

$.actions('tree', {
    showSearch: function() {
        this.closest('.tree-panel').addClass('show-action');
    },
    hideSearch: function(e) {
        this.closest('.tree-panel').removeClass('show-action').find('input').focus();
    },
    clickNode: function(e) {
        // $(document).trigger('treeNodeSelected', this.data('node'));
    },
    toggleTree: function() {
        let $icon = this.find('>.tree-node-text>.icon-expand,>.tree-node-text>.icon-expanded');
        let $child = this.siblings('.tree');
        if (this.data('expanded')) {
            $child.slideUp();
            this.data('expanded', false);
        } else {
            $child.slideDown();
            this.data('expanded', true);
        }
        $icon.toggleClass('icon-expand').toggleClass('icon-expanded');
    },
    delGroup: function(e) {
        e.stopPropagation();
        e.preventDefault();
        let $li = $(this).parent().parent();
        $.myAjax({
            url: "group/delGroup.do",
            data: {
                groupId: $(this).attr("data-id")
            },
            success: function(res) {
                $li.remove();
            }
        });
    },
    editGroup: function(e) {
        e.stopPropagation();
        e.preventDefault();
        let $input = $(this).parent().prev();
        $input.click(function(event) {
            event.stopPropagation();
            event.preventDefault();
        });
        $input.attr("readonly", false).focus().attr("data-old-value", $input.val());
        $(this).parent().addClass("hidden");
        $(this).parent().next().removeClass("hidden");
    },
    cancelEditGroup: function(e) {
        e.stopPropagation();
        e.preventDefault();
        let $input = $(this).parent().prev().prev();
        $input.off("click").on("click", function(event) {

        });
        $input.attr("readonly", true).val($input.attr("data-old-value"));
        $(this).parent().addClass("hidden");
        $(this).parent().prev().removeClass("hidden");
    },
    submitEditGroup: function(e) {
        e.stopPropagation();
        e.preventDefault();
        let $input = $(this).parent().prev().prev();
        $.myAjax({
            url: "group/editGroup.do",
            data: {
                groupId: $(this).attr("data-id"),
                name: $input.val()
            },
            success: function(res) {

            }
        });
        $input.attr("readonly", true);
        $(this).parent().addClass("hidden");
        $(this).parent().prev().removeClass("hidden");
    },
    addGroup: function(e) {
        const nodeData = $(this).closest('.tree-node-line').data('node');
        $.addGroup(nodeData.id);
        e.stopPropagation();
    }
});

// function selectTreeNodeByPageid(pageid) {
//     const $tree = $('#tree-panel');
//     let $node = $tree.find(`[page-id=${pageid}]`).parent();
//     $tree.find('.tree-node.selected').removeClass('selected');
//     $node.addClass('selected');
// }

$(() => {
    // pages.onPageChanged(function(e, pageid){
    //     selectTreeNodeByPageid(pageid);
    // });
    // 等待菜单数据加载完成
    dataFetched.then(({
        data
    }) => {
        let $tree = $('#tree-panel');
        $tree.find('.tree-root-node .tree-node-text').text(data[0].name + "(点击查看所有)");
        // 渲染菜单
        data[0].children.forEach(data => {
            createTree(data, $('#menu-tree'), 1);
        });
    });

    function createTree(data, $parent, indent) {
        // <span class="tree-node-text" style="text-indent:${indent}em">${data.name}</span>
        let action = data.lvl != 3 ? '<i class="icon icon-add" bind-click="addGroup"></i>' : '';
        const $li = $(`<li class="tree-node" data-id="${data.id}">
            <div class="tree-node-line clearfix" bind-click="toggleTree">
                <input type="text" value="${data.name}" class="tree-node-text" readonly style="text-indent:${indent}em;">
                <div class="tree-node-action group-action">
                  <i class="icon icon-del" data-id="${data.id}" bind-click="delGroup"></i>
                  <i class="icon icon-inlineEdit" data-id="${data.id}" bind-click="editGroup"></i>
                ` + action + `
                </div>
                <div class="tree-node-action hidden">
                  <i class="icon icon-inlineCanel" bind-click="cancelEditGroup"></i>
                  <i class="icon icon-inlineOk" data-id="${data.id}" bind-click="submitEditGroup"></i>
                </div>
            </div>
        </li>`);

        let $line = $li.find('.tree-node-line');
        $line.data('node', data);
        let hasChildren = data.children && data.children.length > 0;

        const $text = $li.find('.tree-node-text');
        if (data.icon) {
            $text.prepend(`<i class="icon icon-${data.icon}">`);
        }
        if (hasChildren) {
            $text.prepend(`<i class="icon icon-expand">`);
        }

        if (hasChildren) {
            var $ul = $('<ul class="tree">');
            data.children.forEach(data => {
                createTree(data, $ul, indent + 1); // 递归创建子菜单
            });
            $li.append($ul);
            $ul.slideUp();
        }
        $parent.append($li);
    }
});
